<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="130px" :disabled="source === 'detail'">
      <el-form-item v-if="type === 0" label="景区名称：">
        <el-input v-model="form.siteName" placeholder="请输入" disabled clearable />
      </el-form-item>
      <el-form-item v-if="type === 1" label="所属项目：" prop="locationId">
        <el-select v-model="form.locationId" placeholder="请选择" :disabled="source === 'edit'" clearable>
          <el-option v-for="item in projectList" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
      </el-form-item>
      <el-form-item label="票名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item label="票说明：">
        <el-input v-model="form.illustrate" type="textarea" rows="5" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="游玩须知：" prop="playInstructions">
        <el-input v-model="form.playInstructions" type="textarea" rows="5" placeholder="请输入" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import { getShopProjectList } from '@/api/shop'
import { mapGetters } from 'vuex'

export default {
  name: 'Step1',
  components: {
  },
  props: {
    type: {
      type: [Number, String],
      default: 0
    },
    formDetail: {
      type: Object,
      default: () => ({})
    }
  },

  computed: {
    ...mapGetters([
      'currentSite'
    ])
  },

  watch: {
    formDetail(value) {
      const { locationId, name, illustrate, playInstructions } = value
      this.form = {
        siteName: this.currentSite.scenicName,
        locationId,
        name,
        illustrate,
        playInstructions
      }
      setTimeout(() => {
        this.$refs.form.clearValidate()
      }, 0)
    }
  },

  data() {
    return {
      source: '',
      form: {
        siteName: '',
        locationId: '',
        name: '',
        illustrate: '',
        playInstructions: ''
      },
      projectList: [],
      rules: {
        name: [
          { required: true, message: '请输入票名称', trigger: ['blur'] }
        ],
        locationId: [
          { required: true, message: '请选择所属项目', trigger: ['change'] }
        ]
      }
    }
  },

  created() {
    this.source = this.$route.query.source
    this.form.siteName = this.currentSite.scenicName
    if (this.type === 1) {
      this.getProjectList()
    }
  },

  methods: {
    getProjectList() {
      const data = {
        draft: false,
        siteId: this.currentSite.id
      }
      getShopProjectList(data).then(res => {
        this.projectList = res || []
      }).catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped></style>
